<template>
  <div class="subDetail">
    <!--<div class="subDTop">-->
      <!--<ectitle></ectitle>-->
    <!--</div>-->
    <div class="subDCon">
      <div class="subDImg">
        <img :src="detailInfo.bigImg" alt=""/>
      </div>
      <div class="subConTxt">
        <span v-bind:style="{color:firstWordColor}">{{detailInfo.firstWord}}</span>
       {{detailInfo.otherWords}}
      </div>
    </div>
    <div class="subDBottom">
      <div class="subDB-con">
        <router-link to="/common/english?title=英语角">
          <div class="subDB-back">
            <img src="static/images/eng-corner/det_arrowL.png" alt=""/>
            <div>Back</div>
          </div>
        </router-link>
        <div class="subDB-r">
            <div class="beginChat">
              <router-link to="/common/ecFriend?title=英语角" tag="div" v-if="isLogin">
                <img src="static/images/eng-corner/comment.png" alt=""/>
                <span>开始讨论</span>
              </router-link>
            </div>
          <div class="likePeople" @click="addLikeCount">
            <img src="static/images/eng-corner/like.png" alt=""/>
            <span> {{detailInfo.likePeople}}</span>
          </div>
          <div class="audio">
            <img src="static/images/eng-corner/radio.png" alt=""/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//  import ectitle from './ec-title.vue'
    export default{
      name:'subDetail',
      data:function(){
        return {
          firstWordNum:"",
          firstWordColor:"",
          detailInfo:{
          }
        }
      },
      props:["isLogin"],
      watch:{
        firstWordNum:function(oldVal,nowVal){
          if(this.firstWordNum==0){
            this.firstWordColor="#02BDCC";
          }else if(this.firstWordNum==1){
            this.firstWordColor="#1D3B71";
          }else if(this.firstWordNum==2){
            this.firstWordColor="#FFDF3E";
          }
        }
      },
      mounted:function(){
        this.loadDetail();
      },
      methods:{
        loadDetail:function(){
          var bookId=this.$route.query.bookId;
          this.$http.get('static/engcorner.json').then(function(response){
            var resData=response.data.bookList;
            for(var i=0;i<resData.length;i++){
              if(resData[i].bookId==bookId){
                this.detailInfo=resData[i];
                this.detailInfo.firstWord=resData[i].content.charAt(0);
                this.detailInfo.otherWords=resData[i].content.substring(1);
                this.firstWordNum=i;
              }
            }
          })
        },
        addLikeCount:function(){
          this.detailInfo.likePeople+=1;
        }
      }
    }
</script>
<style>
  .subDImg{
    width: 100%;
    margin: 0 auto;
    height: 250px;
    overflow: hidden;
    position: relative;
  }
  .subDImg img{
    width:130%;
    position: absolute;
    left: -15%;
    top: -40%;
  }
  .subConTxt {
    font-size: 14px;
    padding: 30px;
    text-align: left;
  }
  .subConTxt>span{
    font-size: 20px;
  }
  .subDBottom{
    background: #F3F3F3;
    width: 85%;
    padding: 0 29px 10px;
    height:50px;
    position: fixed;
    bottom: 37px;
  }
  .subDB-con{
    width: 92%;
    height: 100%;
    margin: 0 auto;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .subDB-con a{
    color:#000;
  }
  .subDB-back{
    display: flex;
    align-items: center;
  }
  .subDB-r{
    display: flex;
  }
  .subDBottom img{
    width: 16px;
    height: 16px;
  }
  .subDB-back img{
    width: 13px;
    height: 13px;
  }
  .subDB-r>div{
    display: flex;
    align-items: center;
  }
  .subDB-r>div span{
    padding:  0 10px;
    font-size: 12px;
  }
  @media (max-width: 320px){
    .subConTxt{
      padding:15px;
    }
    .subDBottom{
      width: 87.3%;
      padding:15px 22px;
      height: 10px;
      position: fixed;
      bottom: 37px;
    }
    .subDBottom img{
      width: 12px;
      height:12px;
    }
    .subDB-back img{
      width: 8px;
      height: 8px;
    }
    .subDB-back{
      font-size: 8px;
    }
    .subDB-r>div span {
      padding: 0 8px;
      font-size: 8px;
    }
  }
</style>
